Hva?

  • Open source!
  • SPA
  • MV*
  • Declarative

Hvorfor?

  • Separation
  • Structure
  • Bindings!

View


<html data-ng-app>
  <head>
    <title>Eksempel</title>
    <script src="/Scripts/angular.min.js"></script>
  </head>
  <body>
    {{5+5}}
  </body>
</html>

Controller


var myApp = angular.module('myApp',[]);
myApp.controller('controllerName', ['$scope', function($scope) {

}]);

View, Scope, Controller

$scope


var myApp = angular.module('myApp',[]);
myApp.controller('controllerName', ['$scope', function($scope) {
	$scope.name = "Perry"
}]);

$scope


<html data-ng-app="myApp">
  <head>
    <title>Eksempel</title>
    <script src="/Scripts/angular.min.js"></script>
  </head>
  <body data-ng-controller="controllerName">
    {{name}}
  </body>
</html>

Demo

plnkr.co

Common directives

{{title}}

{{title}}




  
    

      Employee name
      Employee experience
    

  

  
    

      {{employee.name}}
      {{employee.experience}}

{{title}}

{{title}}

Demo

Click me

Workshop

  1. Få kalkulering til å fungere
  2. Lag tabell med kolonnene fornavn, firma, dato
  3. Formater dato (eks. 30.03.2015)
  4. Lag ny kolonne som inneholder initialer (eks "Dean Melone" til "DM")
  5. Sorter listen etter etternavn
  6. Fargelegg alle hunnkjønn med rosa
  7. Fjern alle ansatte yngre enn 30år
  8. Legg til kontobalanse, med bare to desimaler

Custom filters

Routing

Routing


myApp.config(['$routeProvider',
  function($routeProvider, $route) {
    $routeProvider.
      when('/list', {
        templateUrl: 'list.html',
        controller: 'ListController'
      }).
      when('/edit/:id', {
        templateUrl: 'edit.html',
        controller: 'EditController'
      }).
      otherwise({
        redirectTo: '/list'
      });
  }]);

Demo

Click me

Form validation

Demo

Click me

Event handling

Event handling

Bubbling - $emit

Event handling

Capturing - $broadcast

Demo

plnkr

$rootScope

Workshop 2

  1. Lag et detaljbilde for ansatte
  2. Detaljbildet skal inneholde felter fra listen
  3. Bind opp detaljbildet til riktig controller
  4. Legg til knapper for save og cancel
  5. Fornavn skal lenke til detaljbildet
  6. Lag en teller for antall lagringer
  7. Vis antall lagringer i listevisning
  8. Rund av kontobalanse til nærmeste 1000 og bruk 'K' for tusen (eks. 70K)
  9. Lag et custom filter som runder ned til nærmeste 10000

Custom directives

Demo

Click me

Digest cycle

Demo

Click me

Digest cycle

Performance

Total row count: 2519

Watchers count: 15124

Scope count: 2521


Version: 1.4.0-beta.5

Digest cycle: (High+Low)/2: 12.5 ms High: 18 Low: 7

Version: 1.2.0

Digest cycle: (High+Low)/2: 36.5 ms High: 44 Low: 29

ng-Aria


<script src="angular-aria.js">

ng-Aria

plnkr

Decorators

$log

plnkr

$http

$http


$http.get('/someUrl').
  success(function(data) {
		$scope.data = data;
  }).
  error(function(data) {
		$log.error(data);
  });

$http

http://api.openweathermap.org/data/2.5/weather?q=Oslo,No

$q


$scope.asyncGreet() {
  return $q(function(resolve, reject) {
    setTimeout(function() {
        resolve('Hello, world!');
    }, 1000);
  });
}

var promise = $scope.asyncGreet();
promise.then(function(response) {
  alert('Success: ' + response);
}, function(error) {
  alert('Failed: ' + error);
});

i18n, l10n

i18n = internationalization

l10n = localization

i18n, l10n


<html ng-app>
 <head>
   <script src="i18n/angular-locale_de-de.js"></script>
   <script src="i18n/angular-locale_no.js"></script>
 </head>
</html>

Demo

Spørsmål?

meetup.com | ng-conf.org

AngularJS.org

Egghead.io

Code School

bit.ly/ciberangular